/**
 * webpack 配置文件，
 * 可以让我们把一些常用的配置，书写出来，方便调用
 * webpack源码中打包之后，变成了一个：
 * 1. 以文件路径为key值，
 * 2. 以文件内容为value值的一个模块化对象
 */
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  /**
   * 模式：webpack打包模式（开发模式/生产模式）
   *
   */
  mode: 'development',
  /**
   * 入口
   */
  entry: path.join(__dirname, '/src/main.js'),
  /**
   * 出口（文件处理后，输出到哪儿）
   */
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
  /**
   * loader机制 （帮助我们处理非js资源）
   * 解析不同的文件，都有对应的loader
   * .vue ->通过 vue-loader
   * npm install -D vue-loader vue-template-compiler
   */
  module: {
    rules: [
      {
        test: /\.vue$/, // 解析哪个文件，使用正则匹配
        loader: 'vue-loader', // loader就是使用哪个loader的意思
      },
    ],
  },
  /**
   * 插件机制：增强loader能力，同时可以让loader以不同的时机注入生命周期
   */
  plugins: [
    // 帮助大家把vue的内容注入到html文件中
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
    new VueLoaderPlugin(),
  ],
  /**
   * webpack-dev-server 起服务的
   */
  devServer: {
    // 读取静态资源文件夹
    static: {
      directory: path.join(__dirname, 'public'),
    },
    // hot: true,
    compress: true,
    port: 9000, // 服务端口
  },
}

/**
 *
 * 1. 起服务 -> 读文件public -> 先给html文件中注入内容（HtmlWebpackPlugin） -> .vue 中的内容 ->
 *
 * vue-loader(html/js) -> dist
 *
 * .vue 不能直接用 html/js/css
 *
 * 通过webpack 抽离 .vue文件中你写的代码。然后注入到public下的html文件中
 */
